<template>
	<view class="index">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="index-title">
			<!-- <view class="index-scan">
				<image src="/static/images/scan.png" mode="widthFix" @click="scanCode"></image>
			</view> -->
			<view class="index-flex">
				<text>欢迎使用体测系统</text>
				<image src="/static/images/img1.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="index-box">
			<view class="index-top">
				<view class="top-box top-one" @click="goRecord">
					<text>学生建档</text>
					<text>体测学生档案录入</text>
				</view>
				<view class="top-box top-two" @click="goTem">
					<text>开启体测</text>
					<text>配置体测项目并启动</text>
				</view>
			</view>
			<view v-if="isTc" class="index-tc" @click="gotoPage('/pages/score/results?id='+tcData.id+'&pid='+tcData.pro+'&devices='+tcData.devices)">
				<view class="tc-text">
					<text>{{tcData.tcname}} </text>
					<view class="tc-img">
						<image src="/static/images/index.png" mode="widthFix"></image>
						<text>编号: {{tcData.id}}</text>
					</view>
				</view>
				<view class="flex-con">
					<image src="/static/images/icon8.png" mode="widthFix"></image>
					<text>查看</text>
					<image src="/static/images/icon2.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="eq-text" @click="gotoPage('/pages/index/device')">
				<text>设备列表</text>
				<view class="more">
					更多
					<uni-icons type="right" color="#999" size="14"></uni-icons>
				</view>
			</view>
			<view class="index-list">
				<view class="index-item" v-for="(item,index) in listData">
					<view class="state-flex">
						<view class="line-text">
							<view :class="item.sbIszx=='1'?'on-line line-box':'out-line line-box'"></view>
							<text>{{item.sbClientid}}</text>
						</view>
						<!-- <switch color="#11C88C" :disabled="item.sbIszx == '0'?true:false" :checked="item.isChecked" style="transform:scale(0.6)" @change="(e) => switchChange(e, item)"/> -->
					</view>
					<view class="tie-up" @click="gotoPage('/pages/index/project?name='+item.sbName+'&id='+item.id)">
						<view class="tie-l">
							<image v-if="item.shebeiProjectList.length==0" src="/static/images/icon3.png" mode="widthFix"></image>
							<text class="tie-title" v-else>{{item.shebeiProjectList[0].remark}}</text>
							<text>关联项目</text>
						</view>
						<view class="tie-r" v-if="item.shebeiProjectList.length>0">
							<image :src="'/static/images/item'+item.shebeiProjectList[0].projectid+'.png'" mode="widthFix"></image>
						</view>
					</view>
					<view class="index-btn" v-if="false">
						<button @click="gotoPage('/pages/index/addDevice?name='+item.sbName)">配置wifi</button>
						<button @click="gotoPage('/pages/index/project?name='+item.sbName+'&id='+item.id)">编辑项目</button>
						<button @click="gotoPage('/pages/index/align?name='+item.sbName+'&ip='+item.sbIp+'&pid='+item.shebeiProjectList[0].projectid)">校准</button>
					</view>
				</view>
				<view class="null-box1" v-if="listData.length==0">
					<image src="/static/images/null.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[],
				tcData:{},
				isTc:false
			}
		},
		onLoad() {
		},
		onShow() {
			// this.getlist()
			this.getUser()
			uni.$on('mqtt-status', this.handleStatus);
			// setTimeout(()=>{
			// 	this.getlist()
			// },25000)
		},
		onPullDownRefresh() {
			// this.getlist()
			this.getUser()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onUnload() {
		    uni.$off('mqtt-status', this.handleStatus);
		},
		methods: {
			async getUser(){
				let res = await this.http('get','/system/user/getInfo')
				// console.log(res)
				if(res.code==200){
					this.getlist(res.user.deptId)
				}
			},
			handleStatus(msg){
				console.log(msg.message)
				if(msg&&uni.getStorageSync("token")){
					this.getUser()
					// this.getlist()
				}
			},
			scanCode(){
				// uni.navigateTo({
				// 	url:'/pages/index/addDevice'
				// })
				// uni.scanCode({
				// 	onlyFromCamera: true,
				// 	success: function (res) {
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
				// 		uni.navigateTo({
				// 			url:'/pages/index/addDevice'
				// 		})
				// 	}
				// });
			},
			goRecord(){
				if(this.isTc){
					this.toast('有正在进行的体测，可添加学生')
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/student/list?id=' + this.tcData.tcnameid+'&queueid='+this.tcData.id
						})
					},2000)
				}else{
					uni.navigateTo({
						url:'/pages/student/createX'
					})
				}
			},
			goTem(){
				if(this.isTc){
					uni.navigateTo({
						url:'/pages/index/temporary'
					})
				}else{
					this.toast('请先建档')
				}
			},
			async getlist(e){
				let res = await this.http("get","/tc/shebei/list",{
					pageNum:1,
					pageSize:8,
					sbXxid: e,
					sbClientid:''
				})
				if(res.code==200){
					res.rows.forEach(item=>{
						if(item.sbIszx == '0'){
							item.isChecked = false
						}else{
							item.isChecked = true
						}
					})
					this.listData = res.rows
					// console.log(res.rows)
					this.getTc()
				}
			},
			gotoPage(e){
				uni.navigateTo({
					url: e
				})
			},
			switchChange(event, item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认开启',
					success: function (res) {
						if (res.confirm) {
							const isChecked = event.detail.value;
							item.isChecked = event.detail.value
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async getTc(){
				let res = await this.http("get","/tc/tcOperate/getTcqueueList")
				// console.log(res)
				let res1 = await this.http('get', "/tc/tcOperate/tcnameList", {
					pageNum: 1,
					pageSize: 10
				})
				// console.log(res1.rows)
				if(res.code==200){
					const findChineseStatus1Index = res.data.findIndex(item => 
					  item.status === '1'
					);
					if(findChineseStatus1Index == -1){
						this.isTc = false
					}else{
						this.isTc = true
						this.tcData = res.data[findChineseStatus1Index]
						this.tcData.tcname = res1.rows.find(item=>item.id==this.tcData.tcnameid).tcname
					}
					// console.log(this.tcData)
					// res.data.forEach(item=>{
					// 	if(item.status=='1'){
					// 		this.isTc = true
					// 		this.tcData = item
					// 	}else{
					// 		this.isTc = false
					// 	}
					// })
				}
			},
		}
	}
</script>

<style lang="less">
	.tc-img{
		width: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 10upx;
		margin-top: 10upx;
		padding: 8upx 10upx;
		image{
			width: 32upx;
			height: auto;
		}
		text{
			font-size: 28upx;
			display: block;
			margin-left: 10upx;
		}
	}
	.null-box1{
		width: 100%;
		height: 47vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		image{
			width: 100upx;
			height: auto;
		}
		text{
			font-size: 28upx;
			color: #999;
			display: block;
			margin-top: 20upx;
		}
	}
	.state-flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28upx;
		.line-text{
			display: flex;
			align-items: center;
		}
		.line-box{
			width: 8upx;
			height: 8upx;
			border-radius: 50%;
			margin-right: 10upx;
		}
		/deep/ .uni-switch-input:before {
		  background-color: #C7C7C7;
		}
		.on-line{
			background-color: #11C88C;
		}
		.out-line{
			background-color: #EE1314;
		}
	}
	.index-tc{
		width: 100%;
		// line-height: 70upx;
		background-color: #DCEFF7;
		margin-top: 30upx;
		padding: 10upx 20upx 15upx 20upx;
		box-sizing: border-box;
		font-size: 32upx;
		border-radius: 12upx;
		color: #0075C2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.flex-con{
			display: flex;
			align-items: center;
			image{
				width: 40upx;
				height: auto;
				display: block;
				&:first-child{
					width: 32upx;
					margin-right: 10upx;
				}
			}
		}
	}
	.index{
		width: 100%;
		background: url('/static/images/bg4.png') no-repeat;
		background-size: 100%;
		.index-title{
			padding: 80upx 40upx 0  40upx;
			box-sizing: border-box;
			.index-scan{
				display: flex;
				justify-content: flex-end;
				image{
					width: 40upx;
					height: auto;
					margin: 40upx 0;
				}
			}
			.index-flex{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 44upx;
					color: #1A1A1A;
					font-weight: bold;
				}
				image{
					width: 220upx;
					height: auto;
				}
			}
		}
		.index-box{
			width: 100%;
			min-height: 80vh;
			padding: 40upx;
			box-sizing: border-box;
			border-radius: 20upx 20upx 0px 0px;
			background: linear-gradient(180deg, #F5F9FF 0%, #F0F5F3 100%);
			position: relative;
			top: -10upx;
		}
		.index-top{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top-box{
				width: 48%;
				height: 216upx;
				padding: 40upx;
				box-sizing: border-box;
				text{
					display: block;
					color: #fff;
					font-size: 36upx;
					&:last-child{
						font-size: 24upx;
					}
				}
			}
			.top-one{
				background: url('/static/images/bg1.png') no-repeat;
				background-size: 100% 100%;
			}
			.top-two{
				background: url('/static/images/bg2.png') no-repeat;
				background-size: 100% 100%;
			}
		}
		.eq-text{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30upx;
			text{
				font-size: 30upx;
			}
			.more{
				font-size: 24upx;
				color: #999;
				display: flex;
				align-items: center;
			}
		}
		.index-list{
			width: 100%;
			// min-height: 45vh;
			background-color: #fff;
			padding: 15upx 5upx;
			box-sizing: border-box;
			margin-top: 20upx;
			border-radius: 8upx;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
		}
		.index-item{
			width: 47%;
			margin: 0 1.5% 20upx 1.5%;
			background-color: #F0F7FA;
			padding: 20upx 0 20upx 20upx;
			box-sizing: border-box;
			border-radius: 10upx;
			.tie-up{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30upx;
				.tie-l{
					image{
						width: 32upx;
					}
					text{
						font-size: 24upx;
						color: #767676;
						display: block;
					}
					.tie-title{
						font-size: 28upx;
						color: #1A1A1A;
					}
				}
				.tie-r{
					padding-right: 30upx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 76upx;
						height: auto;
					}
				}
			}
		}
		.index-btn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;
			button{
				width: 30%;
				font-size: 28upx;
			}
		}
	}
</style>
